<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件开发</title>
</head>
<body>

<!--
  组件化开发  可以将实现某些特定功能的代码(html css javascript)组合在一起就形成了一个组件
  组件的定义:
    1.全局组件
    2.局部组件
  使用步骤:
    1.创建组件对象
    2.注册组件
    3.使用组件

    父组件 ->子组件 传递参数   props  单向数据流  父 -> 子
    子组件->父组件传参  函数的调用 实现子组件->父组件传参

    非单文件组件:  在一个html文件中定义了多个组件
    单文件组件 :  .vue   一个.vue文件定义一个组件
-->

<div id="app">
<!--    组件标签  v-bind  在列表渲染时 为了vue后续容易对节点进行相关操作 vue官方建议喜爱遍历节点上添加一个key作为该节点的唯一标识-->
  <student  :key="student.name" :name="student.name" :age="student.age" :major="student.major" v-for="student in students"></student>
  <teacher tname="jack"></teacher>
</div>

<script src="../js/vue.js"></script>
<script>

    // 创建学生信息展示组件对象
    const  student = {
        template:`
           <div>
                <h1>学生信息展示</h1>
                <p>学生姓名:{{name}}</p>
                <p>学生年龄:{{age}}</p>
                <p>学生专业:{{major}}</p>
            </div>
        `,
        data() {   //  组件中提供动态数据的data配置项 需要使用函数形式
            return {
                // name:'jack',
                // age:20,
                // major:'java'
            }
        },
        props:['name','age','major']
    }

    // 注册全局组件
    Vue.component('student',student)

    // 定义教师组件
    const teacher = {
        template:`
            <div>
                <h1>教师信息展示</h1>
                <p>教师姓名:{{tname}}</p>
                <student></student>
            </div>
        `,
        props: ['tname'],
        // components: {
        //     student
        // }

    }
    const vm = new Vue({  //  父组件
        el:'#app',
        data:{
            students:[
                {
                    name:'xiaoming1',
                    age:30,
                    major:'java'
                },
                {
                    name:'xiaoming2',
                    age:20,
                    major:'web'
                },
                {
                    name:'xiaoming3',
                    age:25,
                    major:'web'
                },
                {
                    name:'xiaoming4',
                    age:30,
                    major:'web'
                }
            ]

        },
        methods:{},
        components:{ //  注册组件    局部组件  只能在vue实例中绑定的容器中使用  子组件
           teacher
        }
    })
</script>

</body>
</html>
